<!DOCTYPE html>
{% load   staticfiles %}
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
            *{
                page-break-before:always;
                page-break-inside:avoid;
            }
			.view {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
			}

			h3 {
				color: #303133;
				font-size: 18px;
			}

			.attr {
				font-size: 14px;
				color: #909399;
			}

			.zhi {
				font-size: 14px;
				color: #777;
			}

			.mainView {
				width: 80%;
				height: 100%;
			}

			.box {
				width: 100%;
				border: 1px solid #ccc;
			}

			.boxs-items {
				width: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
                page-break-before:always;
                page-break-inside:avoid;
			}

			.item {
				-webkit-box-sizing: border-box;
				        box-sizing: border-box;
				width: 33.3%;
				border: 1px solid #ccc;
				text-align: left;
				padding: 3px;
			}

			.items {
				-webkit-box-sizing: border-box;
				        box-sizing: border-box;
				width: 100%;
				border: 1px solid #ccc;
				text-align: left;
				padding: 3px;
			}

			.speH {
{#				height: 120px;#}
			}

			.speImg {
				width: 50%;
			}

			.itemSpec {
				width: 5%;
				-webkit-box-sizing: border-box;
				        box-sizing: border-box;
				border: 1px solid #ccc;
				text-align: left;
				padding: 3px;
			}

			.itemSpeW {
				width: 45%;
				-webkit-box-sizing: border-box;
				        box-sizing: border-box;
				border: 1px solid #ccc;
				text-align: left;
				padding: 3px;
			}

			.itemSpeF {
				width: 33.33%;
				-webkit-box-sizing: border-box;
				        box-sizing: border-box;
				border: 1px solid #ccc;
				text-align: left;
				padding: 3px;
			}

			.lastHi {
{#				height: 100px;#}
{#				display: -webkit-box;#}
{#				display: -ms-flexbox;#}
{#				display: flex;#}
{#				-webkit-box-align: center;#}
{#				    -ms-flex-align: center;#}
{#				        align-items: center;#}
{#				-webkit-box-pack: start;#}
{#				    -ms-flex-pack: start;#}
{#				        justify-content: flex-start;#}
			}

			.borderR {
				border-right: 0;
			}

			.borderT {
				border-top: 0;
			}

			.borderL {
				border-left: 0;
			}

			.borderR {
				border-top: 0;
			}
		</style>
	</head>
	<body>
		<div class="view">
			<div class="mainView">
				<h3>保养工单详情</h3>
				<div class="box">
					<div class="boxs-items">
						<div class="item borderL borderT borderR"><span class="attr">电梯注册号：</span><span class="zhi">{{ register_code }}</span></div>
						<div class="item borderT borderR"><span class="attr">电梯类型：</span><span class="zhi">{{ elevator_type }}</span></div>
						<div class="item borderR borderT"><span class="attr">维保类型：</span><span class="zhi">{{ maintain_type }}</span></div>
					</div>
					<div class="boxs-items">
						<div class="item borderL borderT borderR"><span class="attr">保养日期：</span><span class="zhi">{{ day }}</span></div>
						<div class="item borderT borderR"><span class="attr">维保人员签名：</span><span class="zhi"></span></div>
						<div class="item borderR borderT"><span class="attr">使用单位签名：</span><span class="zhi"></span></div>
					</div>
					<div class="boxs-items speH">
						<div class="item borderL borderT borderR"><span class="attr">保养记述：</span><span class="zhi">{{ desc }}</span></div>
						<div class="item borderT borderR">
{#							<img src="" alt="" class="speImg">#}
                            <img src = '{%  static maintain_signature %}' class="speImg"/>
						</div>
						<div class="item borderR borderT" class="speImg">
{#							<img src="" alt="">#}
                            <img src = '{%  static signature %}' class="speImg"/>
						</div>
					</div>
					<div class="boxs-items">
						<div class="items borderL borderT borderR"><span class="attr">维保单位：</span><span class="zhi">{{ maintain_company_name }}</span></div>
					</div>
					<div class="boxs-items">
						<div class="items borderL borderT borderR"><span class="attr">使用单位：</span><span class="zhi">{{ property_company_name }}</span></div>
					</div>
					<div class="boxs-items">
						<div class="itemSpec borderL borderT"><span class="attr">序号</span></div>
						<div class="itemSpeW borderL borderT"><span class="attr">维保项目（内容)</span></div>
						<div class="itemSpeW borderL borderT"><span class="attr">维保基本要求</span></div>
						<div class="itemSpec borderL borderT borderR"><span class="attr">记录</span></div>
					</div>
                    {% for content in wb_content %}
					<div class="boxs-items">
						<div class="itemSpec borderL borderT"><span class="zhi">{{ forloop.counter }}</span></div>
						<div class="itemSpeW borderL borderT"><span class="zhi">{{ content.ckitem }}</span></div>
						<div class="itemSpeW borderL borderT"><span class="zhi">{{ content.ckcontent }}</span></div>
						<div class="itemSpec borderL borderT borderR"><span class="zhi">{{ content.ckvalue }}</span></div>
					</div>
                    {% endfor %}
                    {% for picture in pictures %}
					<div class="boxs-items">
						<div class="itemSpeF borderL borderT lastHi"><span class="attr">位置：</span><span class="zhi">{{ picture.materials }}</span></div>
						<div class="itemSpeF borderL borderT lastHi"><span class="attr">材料名称:</span><span class="zhi">{{ picture.note }}</span></div>
						<div class="itemSpeF borderL borderT lastHi borderR">
{#							<img src="" alt="" class="speImg">#}
                            <img src = '{% static picture.image %}' class="speImg"/>
						</div>
					</div>
                    {% endfor %}
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">

</script>
